<template>
    <div class="table-box">
        <div class="table-search">
            <el-form :inline="true" :model="form">
                <el-form-item label="商户ID">
                    <el-input v-model="form.merchant_id" placeholder="商户ID" />
                </el-form-item>
                <el-form-item label="商户名称">
                    <el-input v-model="form.merchant_name" placeholder="商户名称" />
                </el-form-item>
                <el-form-item label="卡片ID">
                    <el-input v-model="form.card_id" placeholder="卡片ID" />
                </el-form-item>
                <el-form-item label="卡号后四位">
                    <el-input v-model="form.card_number" placeholder="卡号后四位" />
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email" placeholder="邮箱" />
                </el-form-item>
                <el-form-item label="卡片状态">
                    <el-input v-model="form.card_status" placeholder="卡片状态" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onQuery">查询</el-button>
                    <el-button @click="onReset">重置</el-button>
                    <el-button type="primary" plain @click="onExport">导出</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="card content-box">
            <div class="table">
                <el-table :data="tableData" border v-loading="loading">
                    <el-table-column prop="id" label="id" align="center" />
                    <el-table-column prop="merchant_id" label="商户id" align="center" />
                    <el-table-column prop="merchant_name" label="商户名称" align="center" width="150" />
                    <el-table-column prop="is_offline" label="是否线下开卡" align="center">
                        <template #default="scope">
                            <el-tag :type="scope.row.is_offline ? 'success' : 'danger'">{{ scope.row.is_offline ? "是" : "否" }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="card_issuer" label="发卡方" align="center" />
                    <el-table-column prop="card_id" label="卡片ID" align="center" width="200" />
                    <el-table-column prop="total_amount" label="卡片额度"  align="center" />
                    <el-table-column prop="currency" label="开卡币种"  align="center" />
                    <el-table-column prop="card_number" label="卡号"  align="center" width="150">
                        <template #default="scope">
                            <el-button
                                type="warning" size="small"
                                @click="handleOperate(scope.$index, scope.row, 'edit')"
                                v-if="!scope.row.card_number && scope.row.is_offline == 1"
                                >设置卡号</el-button>
                            <span v-else>{{ scope.row.card_number }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name_on_card" label="持卡人名字"  align="center" width="200" />
                    <el-table-column prop="nick_name" label="卡昵称"  align="center" />
                    <el-table-column prop="card_status" label="卡片状态"  align="center" />
                    <el-table-column prop="brand" label="品牌"  align="center" />
                    <el-table-column prop="allowed_count" label="交易次数"  align="center" />
                    <el-table-column prop="asset_type" label="扣款类型"  align="center" />
                    <el-table-column prop="asset_amount" label="扣款金额"  align="center" />
                    <el-table-column prop="asset_currency" label="扣款币种"  align="center" />
                    <el-table-column prop="card_type" label="卡种类"  align="center" />
                    <el-table-column prop="created_by" label="使用人"  align="center" />
                    <el-table-column prop="form_factor" label="卡形式"  align="center" />
                    <el-table-column prop="issue_to" label="发卡行类型"  align="center" />
                    <el-table-column prop="limits" label="限额"  align="center" width="300" />
                    <el-table-column prop="note" label="备注"  align="center" />
                    <el-table-column prop="purpose" label="使用目的"  align="center" />
                    <el-table-column label="有效期"  align="center">
                    <template #default="scope">
                        {{ scope.row.active_from }}-{{ scope.row.active_to }}
                    </template>
                    </el-table-column>
                    <el-table-column prop="full_name" label="全名" align="center" />
                    <el-table-column prop="email" label="邮箱" align="center" />
                    <el-table-column prop="mobile_number" label="手机号" align="center" />
                    <el-table-column label="地址"  align="center">
                    <template #default="scope">
                        {{ scope.row.country }}/{{ scope.row.city }}/{{ scope.row.line1 }}/{{ scope.row.line2 }}/{{ scope.row.postcode }}/{{ scope.row.state }}
                    </template>
                    </el-table-column>
                    <el-table-column prop="createtime" label="时间" :formatter="formatterTime" align="center"  width="180" ></el-table-column>
                </el-table>
                <div class="table-pagination">
                    <el-pagination :current-page="pageable.pageNum" :page-size="pageable.pageSize"
                        :page-sizes="[10, 25, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                        :total="pageable.total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
        <DialogForm
            @cancel="cancel"
            @closeDialog="closeDialog"
            @submitForm="submit"
            :dialogFormVisible="dialogVisible"
            :dialogForm="dialogForm"
            :btnLoading="btnLoading"
            />
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { formatterTime, formatter, exportOrDownload } from "@/utils/utils";
import { cardsListApi, SetCardNumberApi } from "@/api/payServerse/cards";
import DialogForm from "./components/cardForm.vue";

const loading = ref(false);
const tableData = ref([]);
const dialogVisible = ref(false);
const btnLoading = ref(false);
const btnType = ref("");
const formData = {
    merchant_id: "",
    card_id: "",
    card_number: "",
    card_status: "",
    email: ""
};
const form = reactive({ ...formData });
const pageable = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0
});
// 参数
const param = () => {
    return {
        page: pageable.pageNum,
        pagesize: pageable.pageSize,
        merchant_id: form.merchant_id,
        email: form.email,
        card_id: form.card_id,
        card_number: form.card_number,
        card_status: form.card_status,
    };
};
const dialogFormData = {
    card_id: "",
    card_number: "",
    expiry_year: "",
    expiry_month: "",
    cvv: "",
};
const dialogForm = reactive({ ...dialogFormData });
const handleOperate = async (index, row, type) => {
    // 编辑
    if (type === "edit") {
        btnType.value = "edit";
        Object.assign(dialogForm, { ...row });
        dialogVisible.value = true;
    }
};
// 提交
const submit = async param => {
    try {
        btnLoading.value = true;
        if (btnType.value == "edit") {
            const res = await SetCardNumberApi(param);
            ElMessage({
                message: res.message,
                type: "success"
            });
        }
        dialogVisible.value = false;
        btnLoading.value = false;
        getTbaleData();
    } catch (error) {
        btnLoading.value = false;
    }
};
//关闭弹窗
const closeDialog = () => {
    dialogVisible.value = false;
    btnType.value = "";
    Object.assign(dialogForm, dialogFormData);
};
// 取消
const cancel = () => {
    dialogVisible.value = false;
    btnType.value = "";
    Object.assign(dialogForm, dialogFormData);
};
// 获取表格数据
const getTbaleData = async () => {
    loading.value = true;
    try {
        const res = await cardsListApi(param());
        loading.value = false;
        tableData.value = res.data.results;
        pageable.total = res.data.count;
    } catch (error) {
        loading.value = false;
    }
};
// 导出
const onExport = async () => {
    const data = Object.assign(param(), { export: 1, pagesize: 9999999 });
    const res = await cardsListApi(data, "blob");
    exportOrDownload(res, "PayFaz-虚拟卡列表");
};
// 查询
const onQuery = () => {
    getTbaleData();
};
// 重置
const onReset = () => {
    Object.assign(form, formData);
    getTbaleData();
};
// 条数
const handleSizeChange = number => {
    pageable.pageSize = number;
    getTbaleData();
};
// 页码
const handleCurrentChange = number => {
    pageable.pageNum = number;
    getTbaleData();
};
onMounted(() => {
    getTbaleData();
});
</script>
  